<template>
    <div class="gulu-tabs">
        <div class="gulu-tabs-nav" ref="container">
            <div class="gulu-tabs-nav-item" v-for="(t,index) in titles" :ref="el=>{if(t==selected) selectedItem=el}" @click="select(t)" :class="{selected: t==selected}" :key="index">{{t}}</div>
            <div class="gulu-tabs-nav-indicator" ref="indicator"></div>
        </div>
        <div class="gulu-tabs-content">
            <component :is="current" :key="current.props.title" />
        </div>
    </div>
</template>
<script lang="ts">
import Tab from './Tab.vue'
import {computed,ref,onMounted,watchEffect} from 'vue'
export default {
    props:{
        selected:{
            type:String
        }
    },
    setup(props,context){
        const selectedItem=ref<HTMLDivElement>(null)
        const indicator=ref<HTMLDivElement>(null)
        const container=ref<HTMLDivElement>(null)
        onMounted(() => {       //第一次显示且之后更新
            watchEffect(()=>{
                const {width}=selectedItem.value.getBoundingClientRect()
                indicator.value.style.width=width+'px'
                const{left:left1}=container.value.getBoundingClientRect()
                const{left:left2}=selectedItem.value.getBoundingClientRect()
                const left=left2-left1
                indicator.value.style.left=left+'px'
            })      
        })
        const defaults=context.slots.default()
        console.log(defaults)
        console.log(defaults[0].type===Tab)     //tab标签时为true，div（其他）时为false
        defaults.forEach((tag)=>{
            if(tag.type!==Tab){
                throw new Error('Tabs子标签必须是Tab')      //显示报错且停止运行代码
            }
        })
        const titles = defaults.map((tag)=>{
            return tag.props.title
        })
        const current = computed(() => {
            return defaults.find(tag => tag.props.title === props.selected)
        })
        const select =(title:string)=>{
            context.emit('update:selected',title)
        }
        return{
            current,
            defaults,
            titles,
            select,
            selectedItem,
            indicator,
            container
        }
    }
}
</script>
<style lang="scss">
$blue: #40a9ff;
$color: #333;
$border-color: #d9d9d9;

.gulu-tabs {
  &-nav {
    display: flex;
    color: $color;
    border-bottom: 1px solid $border-color;
    position: relative;

    &-item {
      padding: 8px 0;
      margin: 0 16px;
      cursor: pointer;

      &:first-child {
        margin-left: 0;
      }

      &.selected {
        color: $blue;
      }
    }

    &-indicator {
      position: absolute;
      height: 3px;
      background: $blue;
      left: 0;
      bottom: -1px;
      width: 100px;
      transition: all 250ms;
    }
  }

  &-content {
    padding: 8px 0;
  }
}
</style>